<template>
  <div class="mainbody">
    <div class="top">
      <div class="top-left">
        <img src="http://qlmsmart.com/images/power.gif" alt="" />
        <div class="right-content">
          <p>{{ getMonth }}月电量 <span class='TextColor'>{{ otherInfo.当月电量 }}</span> kwh</p>
          <p>{{ getMonth }}月省电 <span class='TextColor'>{{ otherInfo.当月省电 }}</span> kwh</p>
          <p>累计电量 <span class='TextColor'>{{ totalPower }}</span> kwh</p>
        </div>
      </div>
      <div class="top-center">
        <div class="title">强流明照明电量报告</div>
        <!-- <Loop :text="wattHourMeter"></Loop> -->
        <div class="t">
          <p>
            总电量: <span class="TextColor"> {{ data.total_power.toFixed(2) }}</span> KWH
          </p>
          <p>
            总功率: <span class="TextColor"> {{ data.total_w }}</span> W
          </p>
          <p>
            总电流: <span class="TextColor"> {{ data.total_ampere.toFixed(2) }}</span> A
          </p>
          <p :class="{ 'state': data.state == '正常', 'state0': data.state == '异常' }">
            状态: &nbsp; &nbsp; <span> {{ data.state }}</span>
          </p>
        </div>
      </div>
      <div class="top-right">
        <Pie :num="otherInfo.当月节能率" :label="'当月节能率'" :unit="'%'" :id="'pie1'" v-if="otherInfo.当月节能率"></Pie>
        <Pie :num="otherInfo.减少碳排放" :label="'减少碳排放'" :unit="'KG'" :id="'pie2'" v-if="otherInfo.减少碳排放"></Pie>
        <Pie :num="otherInfo.节约标准煤" :label="'节约标准煤'" :unit="'KG'" :id="'pie3'" v-if="otherInfo.节约标准煤"></Pie>
        <!-- {/*<Pie num={otherInfo.减少二氧化硫} label="减少二氧化硫" unit="KG"></Pie>*/}-->
      </div>
    </div>

    <div class="center-bottom">
      <div class="chart">
        <div class="view">
          <div class="query">
            <!-- <Dropdown menu={{ items, onClick}}>
                                    <Space class={style.text}>
                                        {year}
                                        <DownOutlined />
                                    </Space>
                            </Dropdown> -->
            <el-dropdown class="dropdownc">
              <span class="el-dropdown-link">
                {{ year }}
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item v-for="(item, i) in yearList" @click="changeDrop(item)">{{ item.label
                    }}</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <span class="fontColor">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;可视化电量：</span>
          </div>
          <ul class="btbox" id="echars1"></ul>
        </div>
      </div>


      <div class="chart">
        <div class="view">
          <div class="query">
            <!-- <Dropdown menu={{ items, onClick }}>
                                    <Space class={style.text}>
                                        {year}
                                        <DownOutlined />
                                    </Space>
                            </Dropdown> -->
            <el-dropdown class="dropdownc">
              <span class="el-dropdown-link">
                {{ year }}
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item v-for="(item, i) in yearList" @click="changeDrop(item)">{{ item.label
                    }}</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <span class="fontColor">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;可视化碳排放：</span>
          </div>
          <div class="boxnav" id="echart4"></div>
          <!-- <Line :tpf0="annualReport[0].map((i) => i * 0.272)" :tpf1="annualReport[1].map((i) => i * 0.272)"></Line> -->
        </div>
      </div>


    </div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { GetDeviceInfo, ProjectData, report } from '../../utils/util';
import Pie from '../../components/pie.vue'

let data = reactive({
  yearPower: '',
  yearCarbon: '',
  queryForm: {
    pageNum: 1,
    pageSize: 20
  },
  tableData: [],
  total: 0,
  dialog: false,
  form: {},
  rules: {

  },
  total_power: 0,
  total_ampere: 0
})
let date = new Date()
const _year = () => {
  let yearList = []
  for (let i = 0; i < 5; i++) {
    yearList.push({ label: date.getFullYear() - i, key: date.getFullYear() - i })
  }
  return yearList
}
let yearList = ref(_year())
let year = ref(new Date().getFullYear());

const getMonth = date.getMonth() + 1

const currentChange = (page) => {
  // 
  pageData.queryForm.pageNum = page
  getList()
}

const sizeChange = (size) => {
  data.queryForm.pageSize = size
  getList()
}


let formRef = ref(null)

const submit = () => { // 提交新增/编辑表单
  formRef.value.validate(valid => {
    if (valid) {

    }
  })
}
let otherInfo = ref({});
const getPowerCount = (fid) => {
  let params = new FormData()
  params.set("fid", fid)
  $axios.post('/operationDevice/powerCount', params).then(res => {
    const ls1 = new ProjectData(res.data.data, fid)
    otherInfo.value = ls1.getOtherInfo()
  }).catch(err => { })
}

const month = [
  "1月",
  "2月",
  "3月",
  "4月",
  "5月",
  "6月",
  "7月",
  "8月",
  "9月",
  "10月",
  "11月",
  "12月",
]



const echartsInitBar = (kwh0, kwh1) => {

  return {
    backgroundColor: "#0A1E50",
    legend: {
      textStyle: {
        color: "#fff",
        fontSize: 14
      },
      top: '5',
      itemWidth: 10, // 图例标记的图形宽度
      itemHeight: 10,
    },
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      data: month,
      axisLabel: {

        show: true,
        color: "#fff",
        fontSize: "14",

        margin: 20
      },
      axisLine: {
        // x 轴线
        show: true,
        lineStyle: {
          color: "#fff",
        },
        symbol: ["none", "arrow"], // x箭头
        symbolSize: [5, 5], // x箭头大小
      },
      axisTick: {
        // 刻度线
        show: false,
      },
    },
    yAxis: {
      type: "value",
      name: "单位 Kwh",
      scale: true,
      axisTick: false,
      nameTextStyle: {
        color: "#fff",
        fontSize: 14,
        padding: [0, 0, -230, -110.], // 上右下左与原位置距离
      },
      splitLine: {
        // 网格线设置成虚线
        lineStyle: {
          // 网格线设置成虚线
          type: "dashed",
        },
        show: true, // 显示
      },
      axisLabel: {
        // show: false,
        // color: '#fff',

        show: true,
        color: "#fff",
        fontSize: '14',
        // fontWeight: 500,

        margin: 5
      },
      axisLine: {
        // y 轴线
        show: true,
        lineStyle: {
          color: "#fff",
        },
        symbol: ["none", "arrow"], // x箭头
        symbolSize: [5, 5], // x箭头大小
      },
    },
    toolbox: {
      show: true,
      right: "80px",
      feature: {
        dataView: {
          show: true,
          readOnly: false,
          iconStyle: {
            // color: '#fff',
            backgroundColor: '#fff',
            borderColor: '#fff'
          },
          // optionToContent: function(opt) {
          //   return `<table>11111</table>`
          // }
        },
        saveAsImage: {
          show: true,
          iconStyle: {
            // color: '#fff',
            backgroundColor: '#fff',
            borderColor: '#fff'
          },
        },
        restore: {
          show: true,
          iconStyle: {
            // color: '#fff',
            backgroundColor: '#fff',
            borderColor: '#fff'
          },
        },
      },
    },
    series: [
      {
        type: "bar",
        name: "改造前电量",
        barWidth: "8px",
        // data: [
        //   20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20
        // ],
        data: kwh1,
        itemStyle: {
          color: "#FFC814",
          borderRadius: [5, 5, 0, 0],
        },
      },
      {
        type: "bar",
        name: "改造后电量",
        barWidth: "8px",
        // data: [
        //   50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50
        // ],
        data: kwh0,
        itemStyle: {

          color: "#198CFA",
          borderRadius: [5, 5, 0, 0],

        },
      },
    ],
  }
}


const validataTPF = (tpf) => {
  return tpf.map((item) => {
    if (item !== 0) {
      item = Number(item);
    }
    return item ? item : "";
  });
}

const echartsInitLine = (tpf0, tpf1) => {
  return ({
    backgroundColor: "#0A1E50",
    legend: {
      textStyle: {
        color: "#fff",
        fontSize: 14
      },
      top: '5',
      itemWidth: 10, // 图例标记的图形宽度
      itemHeight: 10,
    },

    tooltip: {
      trigger: "axis",
    },
    toolbox: {
      show: true,
      right: "80px",
      feature: {
        dataView: {
          show: true,
          readOnly: false,
          iconStyle: {
            backgroundColor: '#fff',
            borderColor: '#fff'
          },
        },
        saveAsImage: {
          show: true,
          iconStyle: {
            backgroundColor: '#fff',
            borderColor: '#fff'
          },
        },
        restore: {
          show: true,
          iconStyle: {
            backgroundColor: '#fff',
            borderColor: '#fff'
          },
        },
      },
    },
    xAxis: {
      type: "category",
      data: month,
      axisLabel: {

        show: true,
        color: "#fff",
        fontSize: "14",

        margin: 20
      },
      axisLine: {
        // x 轴线
        show: true,
        lineStyle: {
          color: "#fff",
        },
        symbol: ["none", "arrow"], // x箭头
        symbolSize: [5, 5], // x箭头大小
      },
      axisTick: {
        // 刻度线
        show: false,
      },
    },
    yAxis: {
      type: "value",
      name: "单位 Kwh",
      scale: true,
      axisTick: false,
      nameTextStyle: {
        color: "#fff",
        fontSize: 14,
        padding: [0, 0, -230, -110.], // 上右下左与原位置距离
      },
      splitLine: {
        // 网格线设置成虚线
        lineStyle: {
          // 网格线设置成虚线
          type: "dashed",
        },
        show: true, // 显示
      },
      axisLabel: {
        // show: false,
        // color: '#fff',

        show: true,
        color: "#fff",
        fontSize: '14',
        // fontWeight: 500,

        margin: 5
      },
      axisLine: {
        // y 轴线
        show: true,
        lineStyle: {
          color: "#fff",
        },
        symbol: ["none", "arrow"], // x箭头
        symbolSize: [5, 5], // x箭头大小
      },
    },
    series: [
      {
        name: "改造前碳排放",
        type: "line",
        symbol: "rect",
        symbolRotate: 45,
        // data: [2.226, 2.266, 2.509, 2.428, 2.509, 2.428, 6.717, 3, 6, 5, 3, ''],
        data: validataTPF(tpf1),
        symbolSize: 10, //折线点的大小
        itemStyle: {

          color: "#FF7800",
          borderColor: "#FF7800", //拐点边框颜色
          // borderWidth: 15, //拐点边框大小

        },
      },
      {
        name: "改造后碳排放",
        type: "line",
        symbol: "rect",
        symbolRotate: 90,
        symbolSize: 10, //折线点的大小
        // data: [22.255, 22.66, 25.088, 24.278, 25.088, 24.278, 67.17, 10, 20, 10, 10, 20],
        data: validataTPF(tpf0),
        itemStyle: {
          color: "#98D429",

        },
        lineStyle: {
          color: "#98D429",
        },
      },
    ],
  });
}


let totalPower = ref('0');
const getTotalPower = () => {
  $axios.post('/operationDevice/totalPower', {}).then(res => {
    let r = 0;
    if (res.data.data) {
      r = res.data.data.totalPower
    }
    totalPower.value = (r / 1000).toFixed(3);

  }).catch(err => { })
}




const getWattHourMeter = (fid) => {
  let params = new FormData();
  params.append('fid', fid);
  $axios.post('/wattHourMeter/data', params).then(res => {
    data.wattHourMeter = res.data.data;

    let total_power = 0;
    let total_ampere = 0;
    let total_w = 0
    // let [state ,setState]= useState("正常")
    // const [color, setColor] = useState("green")
    for (const iterator of data.wattHourMeter) {
      total_power += iterator.power;
      total_ampere += iterator.amp;
      total_w += iterator.w;
    }
    data.total_power = total_power;
    data.total_ampere = total_ampere;
    data.total_w = total_w;
  }).catch(err => { })
}




const getWarning = (fid) => {
  let params = new FormData();
  params.append('fid', fid);

  $axios.post('/wattHourMeter/getWarning', params).then(res => {
    if (res.data.data.length) {
      data.state = "异常"
    } else {
      data.state = "正常"
    }
  }).catch(err => { })
}
var myChart = '';
var myEchart4 = '';
const getAnnualReport = (fid) => { // 
  let params = new FormData();
  params.append('fid', fid);
  params.append('year', year.value);
  $axios.post('/operationDevice/annualReport', params).then(res => {
    let arr = report(res.data.data);

    if (myChart != null && myChart != "" && myChart != undefined) {
      myChart.dispose();//销毁
    }
    myChart = echarts.init(document.getElementById('echars1'));
    myChart.setOption(echartsInitBar(arr[0], arr[1]));

    if (myEchart4 != null && myEchart4 != "" && myEchart4 != undefined) {
      myEchart4.dispose();//销毁
    }
    myEchart4 = echarts.init(document.getElementById('echart4'));

    myEchart4.setOption(echartsInitLine(arr[0].map((i) => i * 0.272), arr[1].map((i) => i * 0.272)));
  }).catch(err => { })
  data.loading = false;
}

const changeDrop = (item) => {
  year.value = item.key;
  getAnnualReport(fid)
}
let { proxy } = getCurrentInstance()

let fid = '';
proxy.$mitt.on('info', (res) => {
  fid = res;
  getPowerCount(res);
  getWattHourMeter(res);
  getWarning(res);
  getAnnualReport(res);
})

//加载组件完成后执行的生命周期
onMounted(() => {
  data.loading = true;
  // getPowerCount(49);
  getTotalPower();
  // getWattHourMeter(49);
  // getWarning(49);
  // getList();
  // window.setInterval(function () {
  //  /// getWarning(49);
  // }, 1000);
  // getAnnualReport(49);
})
const getList = () => { // 获取表格数据
  data.loading = true;

  data.loading = false;
}
</script>

<style lang="scss" scoped>
.main {
  width: 900px;
  float: left;
}

.mainbody {
  flex: 1;
}

.top {
  height: 150px;
  display: flex;
  gap: 10px;
  // width: 900px;
  // float: left;
  // margin-left: 12px;
}

.top-right {
  display: flex;
  align-items: center;
  background-color: rgb(10, 30, 80);
  padding-left: 20px;
  padding-right: 20px;
  flex: 1 1 0%;
}

.top-right div {
  flex: 1 1 0;
}

.top-center {
  width: 200px;
  background: rgb(10, 30, 80);
  color: white;

  div:first-child {
    text-align: left;
    margin-left: 10px;
    margin-top: 10px;

  }
}

.top-left {
  width: 360px;
  height: 150px;
  display: flex;
  align-items: center;
  font-size: 14px;
  background: rgb(10, 30, 80);

  img {
    margin: 0px 25px;
  }

  .right-content {
    color: white;
    display: flex;
    flex-direction: column;
    height: 90px;
    justify-content: space-around;
    margin-top: 0;
    line-height: 2px;

    p {
      font-weight: normal;

      .TextColor {
        color: #ffc814;
      }
    }
  }


}

.view {
  position: relative;
  padding-top: 20px;
  padding-left: 25px;
  height: 100%;
  box-sizing: border-box;
}

.text {
  color: #ffc814;
  font-weight: bold;
}

.fontColor {
  color: white;
  font-weight: normal;
}

.query {
  position: absolute;
  z-index: 1;
  top: 20px;
  align-items: center;
  min-width: 250px;
}

.chart {
  height: 370px;
  margin-top: 12px;
  background: #0a1e50;

}

.title {
  font-weight: bolder;
}

.main {
  flex: 1;
}

.t p {
  text-align: left;

  font-weight: normal;
  font-size: 14px;
  padding: 0;
  margin: 8px 0px;
  margin-left: 10px;
}

.TextColor {
  color: #ffc814;
}

.state span {
  color: green !important;
}

.state0 span {
  color: red !important;
}

.btbox,
#echart4 {
  height: 100%;
}

.el-dropdown-link {
  color: #ffc814;
}
</style>